<template>
    <div>
        <!-- 优惠券单元格 -->
        <van-coupon-cell
        icon="gold-coin-o"
        title="我的优惠券" 
        is-link
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="show"
        />

        <!-- 优惠券列表 -->
        <van-popup v-model="showList" position="bottom">
        <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
        />
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showList: false,
            chosenCoupon: -1,
            coupons: [],
            disabledCoupons: []
        }
    },

    methods: {
        onChange(index) {
        this.showList = false;
        this.chosenCoupon = index;
        },
        onExchange(code) {
        this.coupons.push(coupon);
        },
        show() {
            this.showList = true
            this.coupons = this.$store.state.user.coupon
            this.disabledCoupons = this.$store.state.user.coupon       
        }
    }
}
</script>

<style lang="less" scoped>

</style>
